<template>
  <div class="home">
    <title-layout title="一、基本信息">
      <row label="姓名" :value="stuInfo.stuName || ''"></row>
      <row label="性别" :value="stuInfo.stuSex == 0 ? '男' : '女'"></row>
      <row label="班级" :value="`${stuInfo.gradeName}${stuInfo.className}`"></row>
      <row label="身份证号" :value="stuInfo.idNum || ''"></row>
    </title-layout>
    <title-layout title="二、测试成绩与得分">
      <div class="table_box">
        <div class="table_one">
          <div class="block block_first">
            <p class="cell">评价指标</p>
            <p class="cell">测试成绩</p>
            <p class="cell">得分</p>
            <p class="cell">评价等级</p>
          </div>
          <div class="box">
            <div class="block">
              <p class="cell">身高/体重</p>
              <p class="cell">{{ `${stuInfo.sgProj}cm/${stuInfo.tzProj}kg` }}</p>
              <p class="cell">{{ stuInfo.tzScore }}</p>
              <p class="cell">{{ stuInfo.tzLevel }}</p>
            </div>
            <div class="block">
              <p class="cell">肺活量</p>
              <p class="cell">{{ stuInfo.fhlProj || '-' }}</p>
              <p class="cell">{{ stuInfo.fhlScore || '-' }}</p>
              <p class="cell">{{ stuInfo.fhlLevel || '-' }}</p>
            </div>
            <div class="block">
              <p class="cell">50米跑</p>
              <p class="cell">{{ stuInfo.pb50Proj || '-' }}</p>
              <p class="cell">{{ stuInfo.pb50Score || '-' }}</p>
              <p class="cell">{{ stuInfo.pb50Level || '-' }}</p>
            </div>
            <div class="block">
              <p class="cell">立定跳远</p>
              <p class="cell">{{ stuInfo.ldtyProj || '-' }}</p>
              <p class="cell">{{ stuInfo.ldtyScore || '-' }}</p>
              <p class="cell">{{ stuInfo.ldtyLevel || '-' }}</p>
            </div>
            <div class="block">
              <p class="cell">坐位体前屈</p>
              <p class="cell">{{ stuInfo.zwtqqProj || '-' }}</p>
              <p class="cell">{{ stuInfo.zwtqqScore || '-' }}</p>
              <p class="cell">{{ stuInfo.zwtqqLevel || '-' }}</p>
            </div>
            <div class="block">
              <p class="cell">800米跑</p>
              <p class="cell">{{ stuInfo.pb800Proj || '-' }}</p>
              <p class="cell">{{ `${stuInfo.pb800Score || '-'}/${stuInfo.pb800Fjscore || '-'}` }}</p>
              <p class="cell">{{ stuInfo.pb800Level || '-' }}</p>
            </div>
            <div class="block">
              <p class="cell">1000米跑</p>
              <p class="cell">{{ stuInfo.pb1000Proj || '-' }}</p>
              <p class="cell">{{ `${stuInfo.pb1000Score || '-'}/${stuInfo.pb1000Fjscore || '-'}` }}</p>
              <p class="cell">{{ stuInfo.pb1000Level || '-' }}</p>
            </div>
            <div class="block">
              <p class="cell">一分钟仰卧起坐</p>
              <p class="cell">{{ stuInfo.yfzywqzProj || '-' }}</p>
              <p class="cell">{{ `${stuInfo.yfzywqzScore || '-'}/${stuInfo.yfzywqzFjscore || '-'}` }}</p>
              <p class="cell">{{ stuInfo.yfzywqzLevel || '-' }}</p>
            </div>
            <div class="block">
              <p class="cell">引体向上</p>
              <p class="cell">{{ stuInfo.ytxsProj || '-' }}</p>
              <p class="cell">{{ `${stuInfo.ytxsScore || '-'}/${stuInfo.ytxsFjscore || '-'}` }}</p>
              <p class="cell">{{ stuInfo.ytxsLevel || '-' }}</p>
            </div>
          </div>

        </div>
        <div class="table_one table_tow">
          <div class="block block_two">
            <p class="cell">标准分</p>
            <p class="cell">您的总分为</p>
          </div>
          <div class="block block_two">
            <p class="cell">{{ stuInfo.bzScore || '-' }}</p>
            <p class="cell">{{ `${stuInfo.zfScore || '-'}/(${stuInfo.zfLevel || '-'})` }}</p>
          </div>
          <div class="block block_two">
            <p class="cell">附加分</p>
            <p class="cell">总分等级</p>
          </div>
          <div class="block block_two">
            <p class="cell">{{ stuInfo.fjScore }}</p>
            <p class="cell">
              <score :score="4"></score>
            </p>
          </div>
        </div>
      </div>
    </title-layout>
    <title-layout title="三、运动处方">
      <div class="sport_box">
        <div class="sport_item">
          <div class="tag">体形</div>
          <div v-if="stuInfo.cfTx">{{ stuInfo.cfTx || '' }}</div>
          <span class="empty" v-else>暂无数据</span>
        </div>
        <div class="sport_item">
          <div class="tag">心肺机能</div>
          <div v-if="stuInfo.cfXfjn">{{ stuInfo.cfXfjn || '' }}</div>
          <span class="empty" v-else>暂无数据</span>
        </div>
        <div class="sport_item">
          <div class="tag">速度力量</div>
          <div v-if="stuInfo.cfSdll">{{ stuInfo.cfSdll || '' }}</div>
          <span class="empty" v-else>暂无数据</span>
        </div>
        <div class="sport_item">
          <div class="tag">力量耐力</div>
          <div v-if="stuInfo.cfLlnl">{{ stuInfo.cfLlnl || '' }}</div>
          <span class="empty" v-else>暂无数据</span>
        </div>
      </div>
    </title-layout>
  </div>
</template>

<script>
// @ is an alias to /src
import TitleLayout from '@/components/TitleLayout.vue';
import Row from '@/components/Row.vue'
import Score from '@/components/Score.vue'
import { getStuInfo } from '@/api/api'
import cache from '@/utils/cache'
export default {
  name: 'HomePage',
  components: {
    TitleLayout,
    Row,
    Score
  },
  data() {
    return {
      basicInfo: [
        {}
      ],
      tabs: [
        {
          name: 'tab1',
          idx: 1
        },
        {
          name: 'tab1',
          idx: 2
        },
      ],
      arr1: [
        { name: '001', },
        { name: '002', },
        { name: '003', }
      ],
      arr2: [
        { name: '001', count: 2 }
      ],
      stuInfo: null
    }
  },

  mounted() {
    console.log(this.fun(this.arr1, this.arr2));
    const info = cache.local.getJSON('userInfo')
    console.log('--info', info);
    this.getStudentScore({ gradeId: info.gradeId, classId: info.classId, stuId: info.stuId })
  },

  methods: {
    async getStudentScore(params) {
      try {
        const res = await getStuInfo(params)
        if (res) {
          console.log('info', res);
          this.stuInfo = res.data
        }
      } catch (error) {
        console.log(error);
      }
    },


    fun(arr1, arr2) {
      return arr1.map((item, index) => {
        let temp = arr2.find(v => v.name === item.name)
        console.log('temp', temp);
        if (temp) {
          return { ...item, ...temp }
        } else {
          return item
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100vh;
  background-color: @bg-color;
  padding: 15px;

  .table_box {
    .table_one {
      font-size: 12px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .box {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        overflow-x: auto;

      }

      .block {
        border-right: 1px solid #ccc;
        flex-shrink: 0;

        .cell {
          padding: 0 10px;
          height: 24px;
          line-height: 24px;
          border-bottom: 1px solid #ccc;
          text-align: center;
        }

        .cell:first-child {
          border-top: 1px solid #ccc;
        }
      }

      .block_first {
        width: 70px;
      }

      .block:first-child {
        border-left: 1px solid #ccc;
      }


    }

    .table_tow {
      margin-top: 15px;

      .block_two {
        flex: 1;
      }
    }


  }

  .helth_text {
    font-size: 13px;
    line-height: 24px;
  }

  .sport_box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;

    .sport_item {
      width: 48%;
      min-height: 200px;
      box-sizing: border-box;
      margin-right: 4%;
      box-shadow: 0px 0px 2px #ccc;
      margin-bottom: 15px;
      position: relative;
      border-radius: 4px;
      font-size: 13px;
      padding: 30px 4px 4px;
      position: relative;

      .empty {
        display: inline-block;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        margin-left: -50px;
        margin-top: -10px;
        color: #bbb;
        font-size: 12px;

      }

      .tag {
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: #eee;
        width: 80px;
        padding: 2px 0 2px 10px;
        font-size: 14px;
        font-weight: bold;
        border-bottom-right-radius: 4px;
      }

    }

    .sport_item:nth-child(2n) {
      margin-right: 0px;
    }
  }
}
</style>